<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    props: {
      id: String,
    },
    data() {
      return {
        myChart:null,
        option: {
          color: ['#3AA1FF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: "{b}  : {c}人"
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '2%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            // boundaryGap: [0, 0.0001],
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#9E9E9E',
                fontWeight: '80'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              // interval: 'auto',
              lineStyle: {
                color: ['#eee'],
                width: 1,
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['二级建造师', '一级建造师', '二级建筑师', '造价工程师', '监理工程师', '一级结构师', '化工工程师', '电器工程师', '土木工程师'],
            axisLabel: {
              show: true,
              rotate: 0,
              margin: 10,
              inside: false,
              textStyle: {
                color: '#9E9E9E',
                fontWeight: '50'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          },
          series: [{
            type: 'bar',
            barMaxWidth: "70%",
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: function (v) {
                  var val = v.data;
                  if (val == 0) {
                    return '';
                  }
                  return val;
                },
                color: '#9E9E9E'
              }
            },
            data: [122, 133, 441, 515, 661, 771, 818, 1122, 1122]
          }]
        }
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let {id} = this;
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

